<template>
  <div class="LikeComments">
    <el-container>
      <el-main style="margin-right: 20px">
        <div class="right">
          <el-aside class="actmgt-waring" style="width: 100%;">
            <div class="left">
              <el-icon><InfoFilled color="rgb(255,209,0)" size="40"/></el-icon>
            </div>
            <div class="right">
              <div class="top">创建发布之前确保素材包中有内容</div>
            </div>
          </el-aside>
          <el-main style="height: 73.5vh; background: #fff">
            <div class="el_main_box1">
              <div><img class="el_tabs_img" src="@/assets/images/关注.png" alt=""></div>
              <el-tabs v-model="activeName" @tab-click="handleClick" style="margin-left: 10px; width: 100%">
                <el-tab-pane label="用户管理" name="first">
                  <div class="el_main_box1">
                    <span style="font-size: 12px; white-space: nowrap;">关键字：</span>
                    <div class="text_frame"></div>
                  </div>
                  <div class="el_main_box2">
                    <el-button type="primary">导入</el-button>
                  </div>
                  <div class="el_main_box3">
                    <div>
                    <span style="font-size: 12px; white-space: nowrap;">
                      <el-switch v-model="value" active-text="评论" inactive-text="" />
                    </span>
                      <el-select v-model="value" class="m-2" style="margin-left: 42px" placeholder="Select">
                        <el-option
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        />
                      </el-select>
                    </div>
                    <div>
                      <el-button style="margin-left: 20px" type="primary">话术管理</el-button>
                    </div>
                  </div>
                  <div class="el_main_box1">
                    <span style="font-size: 12px; white-space: nowrap;">操作间隔时长（秒）：</span>
                    <div>
                      <el-input-number v-model="num1" :min="1" :max="10" @change="handleChange" />
                      ~
                      <el-input-number v-model="num2" :min="1" :max="10" @change="handleChange" />
                    </div>
                  </div>
                </el-tab-pane>
              </el-tabs>
            </div>
          </el-main>
          <el-footer class="el_footer">
            <div>
              <el-radio-group v-model="radio1" class="ml-4">
                <el-radio label="1" size="large">无头浏览器操作(可视化操作在任务管理可见)</el-radio>
              </el-radio-group>
            </div>
            <div>
              <el-button type="primary">提交任务</el-button>
            </div>
          </el-footer>
        </div>
      </el-main>
      <el-aside>
        <div class="left">
          <el-aside class="actmgt-waring">
            <div class="left">
              <!-- <el-icon><InfoFilled color="rgb(255,209,0)" size="40"/></el-icon> -->
            </div>
            <div class="right">
              <div class="top">选择发布账号</div>
            </div>
          </el-aside>
          <el-main class="el_main">
            <el-table
              :data="tableData"
              style="width: 100%; overflow: hidden; font-size: 12px;"
              height="73.5vh"
              class="el_table"
              :span-method="arraySpanMethod"
              :row-class-name="tableRowClassName"
              table-layout="auto"
            >
              <el-table-column prop="name"  label="全选" align="center">
                <template #header>
                  <el-radio-group v-model="radio1">
                    <el-radio label="全选" size="large"></el-radio>
                    <!-- <el-radio label="2" size="large">Option 2</el-radio> -->
                  </el-radio-group>
                </template>
                <el-radio-group v-model="radio2">
                  <el-radio label="1" size="large"></el-radio>
                  <!-- <el-radio label="2" size="large">Option 2</el-radio> -->
                </el-radio-group>
              </el-table-column>
              <el-table-column prop="name" label="头像" align="center">
                <img src="@/assets/appImg/douyin.png" style="width: 38px; height: 38px; border-radius: 5px" alt="">
              </el-table-column>
              <el-table-column prop="name"  label="" align="center">
                <div>昵称：</div>
                <div>创建时间：</div>
              </el-table-column>
              <el-table-column prop="name" label="详细信息" align="center">
                <div style="color: rgb(78,131,253)">测试账号</div>
                <div>2022年4月10日</div>
              </el-table-column>
              <el-table-column prop="name" label="" align="center">
                <div>关注：<span style="color: rgb(7,194,122)">128</span></div>
                <div>粉丝：<span style="color: rgb(255,48,24)">5068</span></div>
              </el-table-column>
              <el-table-column prop="name" label="状态" align="center">
                <div><img src="@/assets/images/在线.png" style="width: 18px; height: 18px;" alt=""></div>
                <div>正常</div>
              </el-table-column>
              <!-- <el-table-column prop="name" label="操作" align="center">
                <template #default="scope">
                  <el-button size="small" 
                    type="primary" 
                    @click="handleEdit(scope.$index, scope.row)"
                    >修改</el-button
                  >
                  <el-button
                    size="small"
                    type="primary"
                    @click="handleDelete(scope.$index, scope.row)"
                    >查看</el-button
                  >
                </template>
              </el-table-column> -->
            </el-table>
            <el-footer class="el_footer">
              <div class="el_footer_left">已选 <span style="color: red">3</span> 个账号</div>
              <!-- <div class="el_footer_right">
                <el-button
                  type="primary"
                  @click="handleDelete(scope.$index, scope.row)"
                  >使用</el-button
                >
                <el-button
                  type="primary"
                  @click="handleDelete(scope.$index, scope.row)"
                  >启用</el-button
                >
              </div> -->
            </el-footer>
          </el-main>
        </div>
      </el-aside>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2016-05-03',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          date: '2016-05-02',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          date: '2016-05-04',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          date: '2016-05-01',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          date: '2016-05-01',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          date: '2016-05-01',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          date: '2016-05-01',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          date: '2016-05-01',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          date: '2016-05-01',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        }
      ],
      activeName: 'first',
      value: 0
    }
  }
}
</script>

<style scoped>
.LikeComments {
  padding: 15px 20px;
}

.el_main_box1 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 10px 20px;
  /* border-bottom: 1px solid rgb(207, 205, 205); */
}

.el_main_box2 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 10px 20px;
  /* border-bottom: 1px solid rgb(207, 205, 205); */
}

.el_main_box3 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  /* border-bottom: 1px solid rgb(207, 205, 205); */
}

.el_tabs_img {
  width: 23.66px;
  height: 23.66px;
  margin-bottom: 287px;
}

.text_frame {
  width: 100%;
  height: 100px;
  border-radius: 5px;
  margin-left: 72px;
  border: 1px solid rgb(228, 226, 226);
}

.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}

.el_main {
  background-color: #fff;
  border-radius: 5px;
}

.el_main_top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}

.el_main_top .el-input{
  width: 380px;
  box-shadow: 0px 0px 1px #888888;
}

.right_el_header {
  background-color: #fff;
  padding: 10px 15px;
  height: 88px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  margin-bottom: 15px;
}

.right_el_header_bottom {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.right_el_header_top {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.el-textarea__inner {
  height: 85px;
}

.span_button {
  line-height: 33px;
}

.el-form-item__content {
  line-height: 13px;
  text-align: left;
}

.text_div {
  margin-left: 5px;
}

.demo-ruleForm {
  background-color: #fff;
  padding: 5px 5px 5px 0;
  /* height: 76vh; */
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  overflow-y: hidden;
  font-size: 12px;
}

.el-form-item__label {
  font-size: unset;
}

.info-bottom-el-main::-webkit-scrollbar {
 display: none;
}

.info-bottom-el-main {
  height: 77vh;
  overflow-x: scroll;
  overflow-y: scroll;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.userInfo_div {
  white-space: nowrap;
}

.userInfo_div .el-input {
  width: 78%;
}

.alite_div {
  margin-left: -280px;
  margin-bottom: 20px;
  font-size: 14px;
  color: #1074FD;
}

.el-upload--picture-card {
  width: 50px;
  height: 50px;
}

/* .el-form-item__label {
  margin-left: 40px;
} */

.demo-ruleForm .el-input__wrapper {
  box-shadow: 0px 0px 1px #888888;
  border-bottom: #888888;
}

.actmgt {
  margin: 15px 20px;
  /* overflow-y: hidden;
  overflow-x: hidden; */
}

.actmgt-left {
  background-color: white;
  margin-right: 15px;
  height: 85vh;
  border-radius: 5px;
}

.actmgt-middle {
  /* background-color: yellow; */
  margin-right: 15px;
  border-radius: 5px;
}

.actmgt-right {
  /* background-color: green; */
  padding: unset;
}

.actmgt-waring {
  /* width: 300px; */
  display: flex;
  background-color: #2E54EA;
  justify-content: flex-start;
  align-items: center;
  color: white;
  border-radius: 4px;
  height: 42px;
}

.actmgt-waring .left {
  margin-left: 20px;
  margin-top: 5px;
}

.actmgt-waring .right {
  font-size: 14px;
  margin-left: 10px;
}

.actmgt-search {
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 14px;
  margin-bottom: 5px;
  margin-top: 5px;
}

.el-input__wrapper {
  box-shadow: none;
}

.actmgt-search-input {
  width: 160px;
  border-bottom: 1px solid black;
}

.el-icon {
  font-size: 20px;
}

.el-aside {
  overflow: hidden;
  width: 480px;
}

.actmgt-right-info {
  display: flex;
  align-items: center;
  width: 12rem;
  font-size: 12px;
  padding: 10px;
  background-color: #fff;
  box-sizing: border-box;
  margin-bottom: 5px;
  /* border: 1px solid black; */
  margin: 5px 0 5px 10px;
  border-radius: 5px;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  box-shadow: 0 0 5px 1px #2ed4ea;
}

.actmgt-right-info-left img {
  width: 38px;
  height: 38px;
  border-radius: 5px;
}

.actmgt-right-info-middle {
  text-align: left;
  margin-left: 10px;
}

.actmgt-right-info-right {
  margin-top: 14px;
}

.el-main {
  --el-main-padding: 0;
}

.scrollbar-demo-item {
  display: flex;
  align-items: center;
}

.actmgt-left-right {
  width: 24.66px;
  background-color: #2E54EA;
  color: white;
  font-size: 12px;
  height: 63px;
  box-sizing: border-box;
  border-bottom-right-radius: 5px;
  border-top-right-radius: 5px;
  margin-right: 10px;
  box-shadow: 0 0 5px 1px #2ed4ea;

}

.actmgt-left-right span {
  display: inline-block;
  margin-top: 15px;
}

.el_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  padding: 40px 20px;
  /* margin-bottom: 5px; */
  border-bottom: 2px solid rgb(214, 212, 212);
}

.el_header-left {
  font-size: 14px;
}

.el_main {
  overflow: hidden;
}

.el-button--small {
  width: 28px;
}

.el_footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  /* border-top: 2px solid rgb(214, 212, 212); */
}

.info-right {
  width: 40px;
}

.info-right-el-header {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: #fff;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  border-bottom: 2px solid rgb(214, 212, 212);
  height: 66px;
}

.info-right-el-header-top-left {
  font-size: 13px;
  white-space: nowrap;
  text-align: left;
  /* margin-left: 10px; */
}

.info-right-el-header-top-left .top {
  font-size: 16px;
}

.info-right-el-header-top-left .bottom a{
  font-size: 16px;
}

.info-right-el-header-top-rgiht .button {
  width: 75px;
  height: 30px;
  margin-left: 15px;
}
</style>